<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车流</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="static/css/style.css">
    <script src="static/js/jquery.min.js"></script>
</head>
<body>
    <header class="header">
        <a href="#" class="back-btn">返回</a>
        <h1 class="header-title">车流</h1>
    </header>

    <div class="filter-bar">
        <div class="select-box">
            <div class="select-display">
                <span>选择服务区</span>
                <span>▼</span>
            </div>
            <div class="select-options">
                <div class="select-option">选择全部服务区</div>
                <div class="select-option parent">
                    <div class="parent-title">燕赵分公司</div>
                    <div class="child-box">
                        <div class="select-option child">山海关服务区</div>
                        <div class="select-option child">迁安服务区</div>
                        <div class="select-option child">深圳服务区</div>
                    </div>
                </div>
                <div class="select-option parent">
                    <div class="parent-title">燕赵分公司</div>
                    <div class="child-box">
                        <div class="select-option child">山海关服务区</div>
                        <div class="select-option child">迁安服务区</div>
                        <div class="select-option child">深圳服务区</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="time-filters">
            <button class="time-filter">本年</button>
            <button class="time-filter">本月</button>
            <button class="time-filter">本周</button>
            <button class="time-filter active">上日</button>
        </div>
    </div>

    <div class="total-flow">
        总车流 <span class="total-number">28372</span><span class="unit">单位：万辆</span>
    </div>
    <div class="service-area-content">
    <div class="service-area">
        <div class="area-header">
            <span class="area-name">深圳服务区北区</span>
            <span class="area-total">1382</span>
        </div>
        <div class="vehicle-grid">
            <div class="vehicle-item">
                <img src="static/img/xiaokeche.png" alt="车辆图标">
                <div class="vehicle-info">
                    <div class="vehicle-number">182</div>
                    <div class="vehicle-type">小客车</div>
                </div>
            </div>
            <div class="vehicle-item">
                <img src="static/img/dakec.png" alt="车辆图标">
                <div class="vehicle-info">
                    <div class="vehicle-number">182</div>
                    <div class="vehicle-type">大客车</div>
                </div>
            </div>
            <div class="vehicle-item">
                <img src="static/img/xiaohuoche.png" alt="车辆图标">
                <div class="vehicle-info">
                    <div class="vehicle-number">182</div>
                    <div class="vehicle-type">小货车</div>
                </div>
            </div>
            <div class="vehicle-item">
                <img src="static/img/dahuoche.png" alt="车辆图标">
                <div class="vehicle-info">
                    <div class="vehicle-number">182</div>
                    <div class="vehicle-type">大货车</div>
                </div>
            </div>
            <div class="vehicle-item">
                <img src="static/img/weihuaping.png" alt="车辆图标">
                <div class="vehicle-info">
                    <div class="vehicle-number">182</div>
                    <div class="vehicle-type">危化品</div>
                </div>
            </div>
            <div class="vehicle-item">
                <img src="static/img/qita.png" alt="车辆图标">
                <div class="vehicle-info">
                    <div class="vehicle-number">182</div>
                    <div class="vehicle-type">其他</div>
                </div>
            </div>
        </div>
    </div>

    <div class="service-area">
        <div class="area-header">
            <span class="area-name">山海关服务区北区</span>
            <span class="area-total">1382</span>
        </div>
        <div class="vehicle-grid">
            <div class="vehicle-item">
                <img src="static/img/xiaokeche.png" alt="车辆图标">
                <div class="vehicle-info">
                    <div class="vehicle-number">182</div>
                    <div class="vehicle-type">小客车</div>
                </div>
            </div>
            <div class="vehicle-item">
                <img src="static/img/dakec.png" alt="车辆图标">
                <div class="vehicle-info">
                    <div class="vehicle-number">182</div>
                    <div class="vehicle-type">大客车</div>
                </div>
            </div>
            <div class="vehicle-item">
                <img src="static/img/xiaohuoche.png" alt="车辆图标">
                <div class="vehicle-info">
                    <div class="vehicle-number">182</div>
                    <div class="vehicle-type">小货车</div>
                </div>
            </div>
            <div class="vehicle-item">
                <img src="static/img/dahuoche.png" alt="车辆图标">
                <div class="vehicle-info">
                    <div class="vehicle-number">182</div>
                    <div class="vehicle-type">大货车</div>
                </div>
            </div>
            <div class="vehicle-item">
                <img src="static/img/weihuaping.png" alt="车辆图标">
                <div class="vehicle-info">
                    <div class="vehicle-number">182</div>
                    <div class="vehicle-type">危化品</div>
                </div>
            </div>
            <div class="vehicle-item">
                <img src="static/img/qita.png" alt="车辆图标">
                <div class="vehicle-info">
                    <div class="vehicle-number">182</div>
                    <div class="vehicle-type">其他</div>
                </div>
            </div>
        </div>
    </div>
    <div class="service-area">
        <div class="area-header">
            <span class="area-name">山海关服务区北区</span>
            <span class="area-total">1382</span>
        </div>
        <div class="vehicle-grid">
            <div class="vehicle-item">
                <img src="static/img/xiaokeche.png" alt="车辆图标">
                <div class="vehicle-info">
                    <div class="vehicle-number">182</div>
                    <div class="vehicle-type">小客车</div>
                </div>
            </div>
            <div class="vehicle-item">
                <img src="static/img/dakec.png" alt="车辆图标">
                <div class="vehicle-info">
                    <div class="vehicle-number">182</div>
                    <div class="vehicle-type">大客车</div>
                </div>
            </div>
            <div class="vehicle-item">
                <img src="static/img/xiaohuoche.png" alt="车辆图标">
                <div class="vehicle-info">
                    <div class="vehicle-number">182</div>
                    <div class="vehicle-type">小货车</div>
                </div>
            </div>
            <div class="vehicle-item">
                <img src="static/img/dahuoche.png" alt="车辆图标">
                <div class="vehicle-info">
                    <div class="vehicle-number">182</div>
                    <div class="vehicle-type">大货车</div>
                </div>
            </div>
            <div class="vehicle-item">
                <img src="static/img/weihuaping.png" alt="车辆图标">
                <div class="vehicle-info">
                    <div class="vehicle-number">182</div>
                    <div class="vehicle-type">危化品</div>
                </div>
            </div>
            <div class="vehicle-item">
                <img src="static/img/qita.png" alt="车辆图标">
                <div class="vehicle-info">
                    <div class="vehicle-number">182</div>
                    <div class="vehicle-type">其他</div>
                </div>
            </div>
        </div>
    </div>
</div>
    <div id="loading" style="display: none; text-align: center; padding: 20px;">
        <span>加载中...</span>
    </div>
    <script src="layui/layui.js"></script>
    <script src="static/js/common.js"></script>
    <script>
        layui.use(function (){

            const layer = layui.layer;

            const loadingIndex = layer.load(2);
            setTimeout(function (){
                layer.close(loadingIndex);
            },5000)

            let page = 1;
            let loading = false;
            const loadingEl = document.getElementById('loading');
            // 检查是否需要加载更多
            function checkScroll() {
                if (loading) return;

                const scrollHeight = document.documentElement.scrollHeight;
                const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                const clientHeight = document.documentElement.clientHeight;

                if (scrollTop + clientHeight >= scrollHeight - 100) {
                    loadMore();
                }
            }

            // 加载更多服务区数据
            function loadMore() {
                loading = true;
                loadingEl.style.display = 'block';

                // 模拟异步加载数据
                setTimeout(() => {
                    const template = `
                        <div class="service-area">
                            <div class="area-header">
                                <span class="area-name">新增服务区 ${page}</span>
                                <span class="area-total">1382</span>
                            </div>
                            <div class="vehicle-grid">
                                <div class="vehicle-item">
                                    <img src="static/img/xiaokeche.png" alt="车辆图标">
                                    <div class="vehicle-info">
                                        <div class="vehicle-number">182</div>
                                        <div class="vehicle-type">小客车</div>
                                    </div>
                                </div>
                                <!-- 其他车型数据 -->
                            </div>
                        </div>
                    `;

                    $('.service-area-content').append(template);
                    page++;
                    loading = false;
                    loadingEl.style.display = 'none';

                    // 最多加载5页
                    if (page > 5) {
                        window.removeEventListener('scroll', checkScroll);
                        loadingEl.innerHTML = '<span>没有更多数据了</span>';
                    }
                }, 1000);
            }

            // 监听滚动事件
            window.addEventListener('scroll', checkScroll);
        });
    </script>
</body>
</html>